<template>
	<view style="padding: 0 20rpx;">
		<view v-if="cartList.length" class="shop-cart" v-for="(item, index) in cartList" :key="item[selectKey]">
			<view class="it" :id="index" :style="{'left':cruentIndex==index?left:'0'}" @touchstart="touchstart"
				@touchmove="touchmove">
				<view class="shop-info">
					<view class="checkbox" @click="handleTriggerSelect(item)">
						<image v-if="!selectCartList.includes(item[selectKey])" src="../../static/images/select.png"
							mode=""></image>
						<image v-else src="../../static/images/selectcheck.png" mode=""></image>
					</view>
				</view>
				<view class="basic">
					<view class="shop-name" v-if="item.productName">
						{{item.productName}}
						<view class="price-content">
							<view class="unit">￥</view>
							<view class="price">{{item.salePrice}}</view>
						</view>
					</view>
					<view class="shop-name" v-if="item.name">
						{{item.name}}
						<view class="price-content">
							<view class="unit">￥</view>
							<view class="price">{{item.salePrice}}</view>
						</view>
					</view>
					<view class="tag-list">
						{{item.spec}}
						<view class="basic-footer">

							<view class="cart-num">
								<view class="symbol" @click="handleOperateCount({
									type:'del', item, index
								})">
									<image v-if="item.quantity<=1" src="../../static/images/jian_d.png" mode=""></image>
									<image v-if="item.quantity>1" src="../../static/images/jian_c.png" mode=""></image>
								</view>
								<view class="count">
									{{item.quantity}}
								</view>
								<view class="symbol" @click="handleOperateCount({
									type:'add', item, index
								})">

									<image src="../../static/images/jia.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
			<view class="del " @click="deleteFun(item)" :style="{'right':cruentIndex==index?right:'-190rpx'}">
				删除
			</view>

		</view>
		<view v-if="!cartList.length" class="empty">
			<image mode="widthFix" class="empty-image" src="./empty.png"></image>
			<view class="empty-text">购物车空空如也</view>
		</view>
		<view class="cart-footer pb40">
			<view class="cart-select" @click="handleTrigerSelectAll">
				<template v-if="cartList.length">
					<view class="checkbox" :class="selectedAll ? 'selected' : ''">
						<!-- <uni-icons v-if="selectedAll" class="selected-icon" type="checkmarkempty"
							size="28rpx"></uni-icons> -->
						<image v-if="selectedAll" src="../../static/images/selectcheck.png" mode=""></image>
						<image v-else src="../../static/images/select.png" mode=""></image>
					</view>
					<text style="font-size: 24rpx;">
						全选
					</text>
					<view class="price-content">
						<text>合计：</text>
						<view class="unit">￥</view>
						<view class="price">{{(selectedPrice).toFixed(2)}}</view>
					</view>
				</template>
			</view>
			<view class="cart-button ">

				<view class="cart-submit" @click="handleSubmit">结算 <text v-if="selectCartList.length>0">({{selectCartList.length}})</text></view>
			</view>
			<view class="van-submit-bar__safe">

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			cartList: {
				type: Array,
				default: () => []
			},
			selectCartList: {
				type: Array,
				default: () => []
			},
			selectKey: {
				type: String,
				default: '_id'
			}
		},
		watch: {
			selectCartList: {
				handler() {
					this.calculatePrice()
				},
				deep: true
			}
		},
		data() {
			return {
				selectedAll: false,
				selectedPrice: 0,
				lastIndex: '',
				cruentIndex: '',
				startX: '',
				endX: '',
				left: '',
				right: '',
			};
		},
		methods: {
			cheaks(item) {
				console.log(item)
			},
			touchstart(e) {
				let index = e.currentTarget.id
				this.startX = e.touches[0].clientX
				if (this.lastIndex !== index) {
					this.cruentIndex = this.lastIndex
					this.right = '-190rpx'
					this.left = '0'
				}
			},
			// 删除
			deleteFun(item) {
				console.log(item.id, "djdjd")
				this.$emit('deleteCart', item.id)
			},
			touchmove(e) {
				console.log(e)
				this.endX = e.touches[0].clientX
				let index = e.currentTarget.id
				let cha = this.startX - this.endX

				if (cha > 30) {
					this.cruentIndex = index
					this.right = '0'
					this.left = '-190rpx'
				} else {

					this.cruentIndex = index
					this.right = '-190rpx'
					this.left = '0'
				}
				this.lastIndex = this.cruentIndex
			},


			handleOperateCount(params) {
				this.$emit('operateCount', params)
				this.calculatePrice()
			},
			handleTriggerSelect(item) {
				this.$emit('triggerSelect', item)
			},
			handleTrigerSelectAll(item) {
				this.$emit('triggerSelectAll', this.selectedAll)
			},
			handleToDetail(item) {
				this.$emit('toDetail', item)
			},
			handleCartDelete(index) {
				this.$emit('cartDelete', index)
			},
			handleSubmit() {
				this.$emit('submit')
			},
			calculatePrice() {
				let price = 0
				const len = this.cartList.length;
				const selectedList = this.cartList.filter(item => this.selectCartList.includes(item[this.selectKey]))
				this.selectedPrice = selectedList.reduce((price, item) => {
					return price + item.quantity * item.salePrice
				}, 0)
				this.selectedAll = len && len === this.selectCartList.length
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: rgb(246, 246, 246);
		padding-bottom: 150rpx;
	}

	.checkbox {
		// display: flex;
		// justify-items: center;
		// align-items: center;
		// width: 32rpx;
		// height: 32rpx;
		// border: 2rpx solid rgba(0, 0, 0, 0.6);
		// border-radius: 50%;
		// margin: 0 12px 0 8rpx;

		// &.selected {
		// 	padding: 2rpx;
		// 	border: none;
		// 	background: var(--button-danger-background-color, #ee0a24);

		// 	.selected-icon {
		// 		margin: 2rpx;
		// 		color: #fff !important;
		// 	}
		// }
		image {
			width: 40rpx;
			height: 40rpx;
			margin-left: 30rpx;
			margin-right: 42rpx;
		}
	}

	.price-content {
		display: flex;
		color: #f00;
		align-items: center;
		margin-left: 22rpx;

		text {
			color: #333333;
			font-size: 30rpx;
		}

		.unit {
			font-size: 28rpx;
			margin-top: 10rpx;
		}

		.price {
			font-size: 40rpx;
		}
	}

	.it {
		transition: .4s;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		display: flex;
	}

	.del {
		transition: .4s;
		position: absolute;
		right: -190rpx;
		top: 0;
		background-color: red;
		height: 100%;
		width: 140rpx;
		color: #fff;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 0 12rpx 12rpx 0;
	}

	.shop-cart {
		height: 200rpx;
		width: 100%;
		padding: 20rpx 15rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		display: flex;
		position: relative;
		background: #fff;
		margin-bottom: 20rpx;
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(7,42,109,0.15);

		.delete-icon {
			position: absolute;
			top: -8rpx;
			right: -8rpx;
			color: #df3e36 !important;
		}

		.shop-info {
			// display: flex;
			// align-items: center;
			margin-top: 48rpx;

			.shop-image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 12rpx;
			}
		}

		.basic {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 40rpx 10rpx;
			border-bottom: 2rpx solid #eaeaea;

			.shop-name {
				display: flex;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				justify-content: space-between;
			}

			.tag-list {
				flex: 1;
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #999;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.basic-footer {
				display: flex;
				justify-content: space-between;

				.cart-num {
					display: flex;

					.count {
						width: 100rpx;
						height: var(--stepper-input-height, 28px);
						background-color: var(--stepper-background-color, #F2F2F2);
						text-align: center;
						margin: 0 5rpx;
						color: var(--stepper-input-text-color, #323233);
						font-size: var(--stepper-input-font-size, 14px);
						line-height: var(--stepper-input-height, 28px);
						margin: 0 16rpx 0 16rpx;

					}

					.symbol {
						display: flex;
						align-items: center;

						image {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			}
		}
	}

	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;

		.empty-image {
			width: 600rpx;
			margin-top: 48rpx;
		}

		.empty-text {
			text-align: center;
			color: rgba(0, 0, 0, .4);
		}
	}

	.cart-footer {
		background-color: var(--submit-bar-background-color, #fff);
		bottom: 0;
		left: 0;
		position: fixed;
		-webkit-user-select: none;
		user-select: none;
		width: 100%;
		z-index: var(--submit-bar-z-index, 100);
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		padding-bottom: 40rpx;
		padding-top: 20rpx;

		.cart-select {
			display: flex;
			align-items: center;
			color: #323233;
			font-size: 34rpx;

			image {
				margin-top: 10rpx;
			}
		}

		.cart-button {
			display: flex;
			align-items: center;
			flex: 1;
			justify-content: flex-end;

			.cart-submit {
				border-radius: var(--button-round-border-radius, 999px);
				font-size: var(--button-normal-font-size, 14px);
				padding: 0 15px;
				background: var(--button-danger-background-color, #236EFF);
				color: var(--button-danger-color, #fff);
				height: 76rpx;
				width: 200rpx;
				margin-left: 20rpx;
				text-align: center;
				justify-content: center;
				line-height: 76rpx;
				text{
					color: #fff;
					margin-left: 0;
				}
			}

			text {
				color: var(--submit-bar-text-color, #323233);
				font-weight: var(--font-weight-bold, 500);
				text-align: right;
				margin-left: 40rpx;
			}
		}
	}

	.van-submit-bar__safe {
		height: constant(safe-area-inset-bottom);
		height: env(safe-area-inset-bottom);
	}
</style>